<template>
  <div class="input-column">
    <el-row :gutter="gutter" >
      <el-col v-for="(item,index) in inputConfig" :span="item.span || Math.floor(22/inputConfig.length)" :key="index">{{item.columnName}}</el-col>
    </el-row>
    <el-row :gutter="gutter" v-for="(item,index) in myValue" :key="index" >
      <el-col  v-for="(config, i) in inputConfig" :span="config.span || Math.floor(22/inputConfig.length)" :key="config">
        <el-input-number v-if="config.type === 'number'" v-bind="config" :value="item[i].value" @change="handleChange(index,i,$event)" />
        <el-input v-else v-bind="config" :value="item[i].value" @change="handleChange(index,i,$event)" />
      </el-col>
      <el-col :span="2">
        <el-button icon="plus" class="btn-icon" v-if="index == 0" @click="handleAdd()" :disabled="max <= myValue.length || disabled"></el-button>
        <el-button icon="minus" class="btn-icon" v-else  @click="handleRemove(index)" :disabled="disabled"></el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: Array
      },
      disabled: {
        type: Boolean,
        default: false
      },
      max: {
        type: Number
      },
      gutter: {
        type: Number,
        default: 15
      },
      inputConfig: {
        type: Array,
        default () {
          return [
            {}
          ]
        }
      }
    },
    data () {
      let myValue = this.value
      if (!this.value || this.value.length === 0) {
        myValue = [['']]
      }
      return {
        myValue
      }
    },
    methods: {
      handleChange (index1, index2, value) {
        this.myValue[index1][index2].value = value
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      },
      handleAdd () {
        let array = []
        this.inputConfig.forEach(() => {
          array.push({})
        })
        this.myValue.push(array)
      },
      handleRemove (index) {
        this.myValue.splice(index, 1)
        this.$emit('change', this.myValue).$emit('input', this.myValue)
      }
    }
  }
</script>
<style lang="scss">
    @import '~styles/var.scss';
    .input-column {
      .el-row{
        margin-bottom: 15px;
        &:first-child{
          margin-bottom:0;
        }
      }
    }
</style>
